<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/resultList.css">
    <link rel="stylesheet" href="../css/userCenter.css">
    <script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
    <link rel="stylesheet" href="../css/jcrop.css">
    <script src="../js/crop.js"></script>
</head>
<body>
<div class="header">
    <div class="container">
        <div class="left">
            <a href="" class="logo">
                <img src="../images/topLogo.png" alt="">
            </a>
            <span>
                个人中心
            </span>
        </div>
        <div class="right">
            <a href="" class="userInfo">
                <img src="../images/userLogo.png" alt="">
            </a>
            <a href="" class="loginOut">
                <span>退出</span>
            </a>
        </div>
    </div>
</div>
<div class="userCenterCon">
    <div class="container clearfix">
        <div class="left">
            <ul>
                <li class="">
                    <a href="">我的词条</a>
                </li>
                <li >
                    <a href="">我的消息</a>
                </li>
                <li >
                    <a href="">基本设置</a>
                </li>
                <li class="active">
                    <a href="">账号设置</a>
                </li>
            </ul>
        </div>
        <div class="right">
            <div class="userNews">
                <p class=" userSettingTips">
                    <span>账号设置</span>
                </p>
                <div class="editorAccount">
                    <div class="userAccountAvt">
                        <span class="userAccountLabel">头像</span>
                        <div class="uploadImg">
                            <img src="../images/userLogo.png" alt="">
                            <div class="userFileBtn">
                                <label class="fileBtn">
                                    <span  id="replaceImg">上传头像</span>
                                    <!--<input type="file" onclick="selectImg(this)">-->
                                </label>
                                <p>支持jpg、gif或png的图片、文件须小于1M</p>
                            </div>

                        </div>
                    </div>
                    <div class="userAccountName">
                        <span class="userAccountLabel">昵称</span>
                        <p class="editorNickName">
                            <span>家住河边喜欢浪</span>
                            <img src="../images/userEditor.png" alt=""
                                 data-target="editoruserNickname"
                                 class="setName editorImg">
                        </p>
                    </div>
                    <div class="userAccountTel">
                        <span class="userAccountLabel">电话</span>
                        <p class="editorTel">
                           <span>15144871248</span>
                            <img src="../images/userEditor.png"
                                 data-target="editoruserTel" alt="" class="setTel editorImg">
                        </p>
                    </div>
                    <div class="userAccountEmail">
                        <span class="userAccountLabel">邮箱</span>
                        <p class="editorEmail">
                           <span>绑定邮箱</span>
                            <img src="../images/userEditor.png"
                                 data-target="editoruserEmail"
                                 alt="" class="setEmail editorImg">
                        </p>
                    </div>
                    <div class="userAccountPassword">
                        <span class="userAccountLabel">密码</span>
                        <p class="editorPassword">
                           <span>*******</span>
                            <img src="../images/userEditor.png"
                                 data-target="editoruserPassword" alt="" class="setPassword editorImg">
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layer" >
    <div class="tc">
        <div class="tcTop">
            <a class="tcClose">
                <img src="../images/close.png" alt="">
            </a>
        </div>
        <p class="tcTitle">手机号修改</p>
        <p class="errorTips">
            <!--修改失败，验证码错误！-->
        </p>
        <div class="editorForm editoruserTel" >
            <div class="editorInput">
                <span>新手机号:</span>
                <input type="text" placeholder="请输入手机号码" id="userPhone">
            </div>
            <div class="editorInput editorCode">
                <span>验证码:</span>
                <input type="text" placeholder="验证码" id="picCode">
                <b class="codeArea" ></b>
            </div>
            <div class="editorInput editorMsgCode">
                <span>手机验证码:</span>
                <input type="text" placeholder="请输入手机验证码" id="messCode">
                <input type="button" class="sendCode" id="getCode" value="发送手机验证码">
            </div>

        </div>
        <div class="editorForm editoruserPassword" >
            <div class="editorInput">
                <span>原密码:</span>
                <input type="text" placeholder="旧密码" id="oldPassword">
            </div>
            <div class="editorInput">
                <span>新密码:</span>
                <input type="text" placeholder="新密码" id="newPassword">
            </div>
            <div class="editorInput">
                <span>确认新密码:</span>
                <input type="text" placeholder="确认新密码" id="confirmNewPassword">
            </div>
        </div>
        <div class="editorForm editoruserEmail" >
            <div class="editorInput">
                <span>邮箱:</span>
                <input type="text" placeholder="输入您的邮箱" id="confirmEmail">
            </div>
        </div>
        <div class="editorForm editoruserNickname" >
            <div class="editorInput">
                <span>昵称:</span>
                <input type="text" placeholder="输入您的新昵称" id="editoruserNickname">
            </div>

        </div>
        <p class="editorBtn">
            <span class="editorConfrim">提交</span>
            <span class="editorCancel">取消</span>
        </p>
    </div>
</div>
<!--图片上传区域-->
<div style="display: none" class="tailoring-container">
    <div class="black-cloth" onclick="closeTailor(this)"></div>
    <div class="tailoring-content">
        <div class="tailoring-content-one">
            <div class="close-tailoring" onclick="closeTailor(this)">×</div>
        </div>
        <div class="tailoring-content-two">
            <!--<div class="tailoring-content-div">-->
                <div class="tailoring-box-parcel">
                    <img id="tailoringImg">
                <!--</div>-->
            </div>
            <div class="preview-box-parcel">
                <p>预览：</p>
                <div class="circular previewImg"></div>
                <label title="上传图片" for="chooseImg" class="l-btn choose-btn">
                    <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)">
                    选择图片
                </label>
            </div>
        </div>
        <div class="tailoring-content-three">
            <button class="l-btn sureCut" id="sureCut">确定</button>
        </div>
    </div>
</div>
<div class="footer">
    <p >
        Copyright：2018 链百科 鄂ICP备18023107号
    </p>
    <p>
        武汉市代劳科技有限责任公司-链百科团队出品
    </p>
</div>
<script src="../layer/layer.js"></script>
<script>
    var editorVal= ''
    var timer =null
    var count =60
    //查看原因
    function checkTel(){
        var reg2 =/^(((13|14|15|16|18|17|19)\d{9}))$/;
        if(!reg2.test($('#userPhone').val())){
            return false;
        }
        return true
    }
    //获取验证码
    //倒计时
    function startCount(){
        var that =this
        timer =setInterval(function (res) {
            count --
            $('#getCode').val(count+'s后重发')
            if(count==0){
                $('#getCode').val('获取验证码')
                clearInterval(timer)
                $('#getCode').removeClass('forbiden')
                $('#getCode').attr('disabled',false)
                count =60
            }
        },1000)
    }
    //获取验证码部分
    $('#getCode').on('click',function (e) {
        if(!$('#userPhone').val()){
            layer.tips('请输入手机号码', '#userPhone', {
                tips: 2
            });
            return false
        }
        if(checkTel()){
            startCount()
            var that =this
            $('#getCode').val('60s后重发')
            $('#getCode').addClass('forbiden')
            $('#getCode').attr('disabled','disabled')
        }else{
            layer.tips('手机号码格式错误', '#userPhone', {
                tips: 2
            });
        }
    })
    //弹窗显示
    $('.editorImg').on('click',function () {
        if($('.layer').css('display')=='none'){
            editorVal =$(this).data('target')
            $('.'+$(this).data('target')).show()
            if($(this).data('target') =='editoruserTel'){
                $('.tcTitle').html('修改手机号码')
            }else if($(this).data('target') =='editoruserPassword'){
                $('.tcTitle').html('修改密码')
            }else if($(this).data('target') =='editoruserNickname'){
                $('.tcTitle').html('修改昵称')
                $('.editoruserNickname input').val($('.editorNickName span').html())
            }else if($(this).data('target') =='editoruserEmail'){
                $('.tcTitle').html('修改邮箱')
            }
            $('.layer').fadeIn(300)
        }
    })
    $('.tcClose').on('click',function () {
        $('.layer').hide()
        $('.editorForm').hide()
    });
    $('.editorCancel').on('click',function () {
        $('.layer').hide()
        $('.editorForm').hide()
    })
    //用户修改之后的提交
    $('.editorConfrim').on('click',function (e) {
        if(editorVal =='editoruserTel'){
            //修改手机号码部分
            if(!$('#userPhone').val()){
                layer.tips('请输入手机号码','#userPhone',{
                    tips:2
                })
                return false
            }
            if(!checkTel()){
                layer.tips('手机号码格式错误','#userPhone',{
                    tips:2
                })
                return false
            }
            if(!$('#picCode').val()){
                layer.tips('请输入验证码','#picCode',{
                    tips:2
                })
                return false
            }
            if(!$('#messCode').val()){
                layer.tips('请输入手机验证码','#messCode',{
                    tips:2
                })
                return false
            }
            console.log('ok')
            //验证码  手机号码  图形验证全部验证完毕
            //数据请求

        }else if(editorVal =='editoruserPassword'){
            //修改密码
            if(!$('#oldPassword').val()){
                layer.tips('请输入原密码','#oldPassword',{
                    tips:2
                })
                return false
            }
            if(!$('#newPassword').val()){
                layer.tips('请输入新的密码','#newPassword',{
                    tips:2
                })
                return false
            }
            if(!$('#confirmNewPassword').val()){
                layer.tips('请确认新的密码','#confirmNewPassword',{
                    tips:2
                })
                return false
            }
            if($('#newPassword').val() !=$('#confirmNewPassword').val()){
                layer.tips('两次输入的密码不一致','#confirmNewPassword',{
                    tips:2
                })
                return false
            }
            //数据提交
            var layerIndex =layer.load(2, {
                shade: [0.1,'#fff'] //0.1透明度的白色背景
            });
            //密码修改操作
            //反馈结果后 close  loading
            setTimeout(function () {
                layer.close(layerIndex); //完成加载后关闭loading

                $('.layer').hide()
                $('.editoruserPassword').hide()
            },2000)


        }else if(editorVal =='editoruserNickname'){
            //修改昵称
                if(!$('.editoruserNickname input').val()){
                    layer.tips('用户名不能为空','#editoruserNickname',{
                        tips:2
                    })
                    return false
                }
        }else if(editorVal =='editoruserEmail'){
            if(!$('.editoruserEmail input').val()){
                layer.tips('邮箱不能为空','#confirmEmail',{
                    tips:2
                })
                return false
            }
        }
    })

</script>
<script>

    //弹出框水平垂直居中
    (window.onresize = function () {
        var win_height = $(window).height();
        var win_width = $(window).width();
        if (win_width <= 768){
            $(".tailoring-content").css({
                "top": (win_height - $(".tailoring-content").outerHeight())/2,
                "left": 0
            });
        }else{
            $(".tailoring-content").css({
                "top": (win_height - $(".tailoring-content").outerHeight())/2,
                "left": (win_width - $(".tailoring-content").outerWidth())/2
            });
        }
    })();

    //弹出图片裁剪框
    $("#replaceImg").on("click",function () {
        $(".tailoring-container").toggle();
    });
    //图像上传
    function selectImg(file) {
        if (!file.files || !file.files[0]){
            return;
        }
        var reader = new FileReader();
        reader.onload = function (evt) {
            var replaceSrc = evt.target.result;
            //更换cropper的图片
            $('#tailoringImg').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真
        }
        reader.readAsDataURL(file.files[0]);

    }
    //cropper图片裁剪
    $('#tailoringImg').cropper({
        aspectRatio: 1/1,//默认比例
        preview: '.previewImg',//预览视图
        guides: false,  //裁剪框的虚线(九宫格)
        autoCropArea: 0.5,  //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
        movable: false, //是否允许移动图片
        dragCrop: true,  //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
        movable: true,  //是否允许移动剪裁框
        resizable: true,  //是否允许改变裁剪框的大小
        zoomable: false,  //是否允许缩放图片大小
        mouseWheelZoom: false,  //是否允许通过鼠标滚轮来缩放图片
        touchDragZoom: true,  //是否允许通过触摸移动来缩放图片
        rotatable: true,  //是否允许旋转图片
        crop: function(e) {
            // 输出结果数据裁剪图像。
        }
    });
    var base64url;

    //裁剪后的处理
    $("#sureCut").on("click",function () {
        if ($("#tailoringImg").attr("src") == null ){
            return false;
        }else{
            var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
            base64url = cas.toDataURL('image/png'); //转换为base64地址形式
            $(".uploadImg img").prop("src",base64url);//显示为图片的形式
            //关闭裁剪框
            closeTailor();
        }
    });
    //关闭裁剪框
    function closeTailor() {
        $(".tailoring-container").toggle();


    }



</script>
</body>
</html>